<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <div class="users_main_head">
        <el-form-item >
          <el-input
            class="users_main_head_search"
            v-model="formInline.user"
            placeholder="根据用户名搜索"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">清空</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button
            type="success"
            class="newElement"
            @click="openDrawer('add')"
            >新增用户</el-button
          >
        </el-form-item>
      </div>
      <div class="uesrs_main_statistics">共{{total}}条记录</div>
      <el-table ref="table" :data="randerList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column
          prop="permission_group_title"
          label="权限组名称"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="role" label="角色" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <!-- <i class="el-icon-edit" @click="openDrawer('edit', row.id)"></i> -->
            <el-row>
            <el-button @click="openDrawer('edit', row.id)" type="primary" icon="el-icon-edit" circle></el-button>
             <el-button  @click="delDrawer(row.id)" type="danger" icon="el-icon-delete" circle></el-button>
             </el-row>
            <!-- <i class="el-icon-delete" @click="delDrawer(row.id)"></i> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :permission_group_title='permission_group_title'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-form>

    <!-- <el-dialog :title="isText" :visible.sync="dialogFormVisible" width="50%">
      <el-form
        status-icon
        ref="ruleForm"
        label-width="250px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" :required="true">
          <el-input
            class="el_input_inner"
            v-model="username"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :required="true">
          <el-input
            class="el_input_inner"
            v-model="email"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item :required="true" label="密码" v-if="drawerType === 'add'">
          <el-input class="el_input_inner" v-model="password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input
            class="el_input_inner"
            v-model="role"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select class="el_input_inner" v-model="groupName">
            <el-option label="区域一"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            class="el_input_inner"
            v-model="phone"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="introduction" type="textarea"></el-input>
        </el-form-item>
        <el-form-item class="submitForm">
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog> -->
    <user-add
    ref="popUp"
    @newDataes='newDataes'
    @handleCloseModal='handleCloseModal'
    :groupName='groupName'
      :rules='rules'
      :formBase="form"
      :text="isText"
      :drawerType="drawerType"
    ></user-add>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/users.js'
import UserAdd from '@/module-manage/components/user-add'
export default {
  components: {
    UserAdd
  },
  data () {
    return {
      dialogFormVisible: false,
      page: 1,
      pagesize: 10,
      total: 0,
      formInline: {
        user: '',
        region: ''
      },
      isText: '',
      randerList: [],
      drawerType: 'add',
      // 表单内容
      groupName: [{ id: 1, key: 123, title: 'qqq' }],
      permission_group_title: '',
      form: {
        password: '',
        introduction: '',
        phone: '',
        role: '',
        email: '',
        username: '',
        permission_group_id: '',
        id: 0
      },
      rules: {
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '请输入6-16位',
            trigger: 'blur'
          }]
      },

      currentPage: ''
    }
  },

  async created () {
    console.log(this.form.password)
    this.initData()
  },
  methods: {
    // 渲染表单
    async initData () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      console.log(data)
      this.randerList = data.list
      this.total = data.counts
    },
    // 点击搜索发生什么
    async onSubmit () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize, username: this.formInline.user })
      this.randerList = data.list
      this.total = data.counts
      // this.initData()
    },
    // 点击清空触发事件
    resetForm () {
      this.formInline.user = ''
      this.initData()
    },
    // 点击编辑或添加
    async openDrawer (value, id) {
      this.$refs.popUp.dialogFormV()
      this.drawerType = value
      if (this.drawerType === 'edit') {
        this.isText = '编辑用户'
        this.form.password = undefined
        this.randerList.forEach(item => {
          if (item.id === id) {
            this.form.introduction = item.introduction
            this.form.phone = item.phone
            this.form.role = item.role
            this.form.email = item.email
            this.form.username = item.username
            this.form.id = id
            this.form.permission_group_id = item.permission_group_id
          }
        })
      }
      if (this.drawerType === 'add') {
        this.isText = '添加用户'
        this.form.introduction = ''
        this.form.phone = ''
        this.form.permission_group_id = ''
        this.form.email = ''
        this.form.username = ''
        this.form.password = ''
        this.form.role = ''
      }
    },
    // 分页点击
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.page = val
      this.initData()
    },
    // 表单提交 关闭弹窗卡片
    handleCloseModal () {
      this.$refs.popUp.dialogFormH()
    },
    // 接返回值重新渲染
    newDataes (data) {
      this.form = data
      this.initData()
      this.form.introduction = ''
      this.form.phone = ''
      this.form.permission_group_id = ''
      this.form.email = ''
      this.form.username = ''
      this.form.password = ''
      this.form.role = ''
    },
    // 删除点击的数据 重新渲染
    async delDrawer (id) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await remove({ id })
        console.log(data)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
// 表单
.demo-form-inline {
  width: 1300px;
  height: 585px;
  padding: 0 20px;
  background-color: #fff;
  margin: 20px;
  .users_main_head {
    width: 100%;
    padding: 20px 0;
  }
}
/deep/.users_main_head_search {
  width: 200px !important;
  height: 32px;
}
// 新增按钮
.newElement {
  margin-left: 787px;
}
.uesrs_main_statistics {
  font-size: 13px;
  background-color: #f4f4f5;
  color: #909399;
  padding: 10px 20px;
}
.el-icon-edit {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  border-radius: 50%;
}
.el-icon-delete {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  border-radius: 50%;
  margin-left: 10px;
}
// 添加修改弹出框
.el_input_inner {
  width: 280px;
  height: 36px;
}
/deep/.el-textarea__inner {
  width: 280px;
  height: 53px;
}
.submitForm {
  margin-left: 300px;
}

// 分页
.el-pagination {
  margin-left: 780px;
  margin-top: 20px;
}

</style>
